<template>
  <div class="my-collect">
    <!--    导航栏-->
    <div style="display: flex">
      <NavBarItem :link="Album">专辑</NavBarItem>
      <NavBarItem :link="Singer">歌手</NavBarItem>
      <NavBarItem :link="Video">视频</NavBarItem>
    </div>
    <!--    路由映射-->
    <div class="router-view">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import NavBarItem from "@/components/content/navbar/NavBarItem";

  export default {
    name: "MyCollect",
    components:{NavBarItem},
    data(){
      return{
        //当前用户id
        userId:this.$store.state.userInfo ? this.$store.state.userInfo.userId : null,
      }
    },
    computed:{
      Album(){
        return '/myCollect/id=' + this.userId + '/album'
      },
      Singer(){
        return '/myCollect/id=' + this.userId + '/singer'
      },
      Video(){
        return '/myCollect/id=' + this.userId + '/video'
      },
    },
    watch:{
      '$store.state.userInfo'(){
        this.userId = this.$store.state.userInfo ? this.$store.state.userInfo.userId : null
        if(!this.userId){
          this.$message.error("只有登录后才能进入这个页面哦!");
          this.$router.replace("/home");
        }
      },
    },
  }
</script>

<style scoped>
.my-collect{
  width: 90%;
  position: absolute;
  top: 44px;
  left: 137px;
  bottom: 50px;
  right: 2px;
  padding: 5px 20px;
  overflow-y: scroll;
}
</style>
